<template>
	<el-dialog v-model="dialog" :title="form.id ? '修改租户' : '添加租户'" width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="form" label-width="120px" :rules="rules" status-icon>
			<el-form-item label="租户名" prop="name">
				<el-input v-model="form.name" show-word-limit maxlength="50"></el-input>
			</el-form-item>
			<el-form-item label="地址" prop="address">
				<el-input v-model="form.address"></el-input>
			</el-form-item>
			<el-form-item label="官网" prop="siteUrl">
				<el-input v-model="form.siteUrl"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phone">
				<el-input v-model="form.phone" :disabled="form.id"></el-input>
				<p style="color:red;">手机号初始化登录账号和密码使用</p>
			</el-form-item>
			<el-form-item label="有效时间" prop="datatimes">
				<el-date-picker v-model="form.datatimes" type="datetimerange" range-separator="-" start-placeholder="授权开始时间"
					end-placeholder="授权结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
			</el-form-item>
			<el-form-item label="租户套餐" prop="packageId">
				<el-select v-model="form.packageId" clearable :disabled="form.id">
					<el-option v-for="(item, index) in tenantPackageList" :key="index" :label="item.name"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio-group v-model="form.status">
					<el-radio label="0">停用</el-radio>
					<el-radio label="1">正常</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { addObj, editObj, getById } from '/@/api/upms/tenant';
import { getList } from '/@/api/upms/tenantpackage';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
interface DataState {
	form: {
		id: string | undefined;
		name: string;
		status: string;
		address: string;
		siteUrl: string;
		email: string;
		phone: string;
		datatimes: Array<string>;
		username: string;
		password: string;
		authBeginTime: string;
		authEndTime: string;
		packageId: string;
	};
	rules: any;
	tenantPackageList: Array<any>
}
export default defineComponent({
	props: {
		type: {
			type: String,
			default: 'add',
		},
	},
	emits: ['initPage'],
	setup(props, { emit }) {
		const data = reactive<DataState>({
			form: {
				id: undefined,
				name: '',
				status: '1',
				address: '',
				siteUrl: '',
				email: '',
				phone: '',
				datatimes: [],
				username: '',
				password: '',
				authBeginTime: '',
				authEndTime: '',
				packageId: ''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入租户名',
						trigger: 'change',
					},
				],
				address: [
					{
						required: true,
						message: '请输入租户地址',
						trigger: 'change',
					},
				],
				siteUrl: [
					{
						required: true,
						message: '请输入租户官网',
						trigger: 'change',
					},
				],
				email: [
					{
						pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
						message: '邮箱格式错误',
						trigger: 'blur',
					},
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'change',
					},
					{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对', trigger: 'blur' },
				],
				packageId: [
					{
						required: true,
						message: '请选择租户套餐',
						trigger: 'change',
					},
				],
				status: [
					{
						required: true,
						message: '请选择状态',
						trigger: 'change',
					},
				],
			},
			tenantPackageList: []
		});
		const dialog = ref(false);
		const loading = ref(false);
		const formRef = ref();
		const initForm = (row: any | undefined) => {
			dialog.value = true;
			getTenantPackageList();
			if (row && row.id) {
				getDetail(row.id);
			}
		};
		const getDetail = (id: string) => {
			loading.value = true;
			getById(id).then((response: any) => {
				data.form = response.data.data;
				data.form.datatimes = [response.data.data.authBeginTime, response.data.data.authEndTime];
				loading.value = false;
			});
		};
		/**
		 * 关闭事件
		 */
		const handleClose = () => {
			resetForm(formRef.value);
		};
		/**
		 * 重置表单
		 */
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			data.form.id = undefined;
			loading.value = false;
			dialog.value = false;
			formEl.resetFields();
		};
		/**
		 * 提交按钮
		 */
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					loading.value = true;
					data.form.authBeginTime = data.form.datatimes[0];
					data.form.authEndTime = data.form.datatimes[1];
					if (data.form.id) {
						//修改
						edit();
					} else {
						//新增
						add();
					}
				}
			});
		};
		/**
		 * 新增
		 */
		const add = () => {
			addObj(data.form)
				.then((response: any) => {
					resetForm(formRef.value);
					ElMessage.success('新增成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 修改
		 */
		const edit = () => {
			editObj(data.form)
				.then((response: any) => {
					resetForm(formRef.value);
					ElMessage.success('修改成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};

		const getTenantPackageList = () => {
			getList({}).then(response => {
				data.tenantPackageList = response.data.data;
			})
		}

		return {
			dialog,
			loading,
			formRef,
			initForm,
			submitForm,
			handleClose,
			getTenantPackageList,
			...toRefs(data),
		};
	},
});
</script>
